<template>
	<el-card shadow="hover" class="chart-card">
		<template #header>检验数据统计</template>
		<v-chart :option="option" autoresize style="width: 100%; height: 350px;" />
	</el-card>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { getCheckStatsData } from '@/mock/dashboardData'


export default {
	setup() {
		const option = ref({})
		onMounted(() => {
			nextTick(() => {
				const { methods, counts, months, rates } = getCheckStatsData()
				option.value = {
					tooltip: { trigger: 'axis' },
					legend: { data: ['检验数量', '合格率'] },
					xAxis: [
						{ type: 'category', data: methods, axisLabel: { rotate: 30 } },
						{ type: 'category', data: months, show: false }
					],
					yAxis: [
						{ type: 'value', name: '数量' },
						{ type: 'value', name: '合格率（%）', max: 100 }
					],
					series: [
						{
							name: '检验数量',
							type: 'bar',
							data: counts,
							xAxisIndex: 0,
							yAxisIndex: 0,
							itemStyle: { color: '#5470C6' }
						},
						{
							name: '合格率',
							type: 'line',
							data: rates,
							xAxisIndex: 1,
							yAxisIndex: 1,
							smooth: true,
							lineStyle: { width: 2 },
							itemStyle: { color: '#91CC75' }
						}
					]
				}
			})
		})
		return { option }
	}
}
</script>

<style scoped>
.chart-card {
	height: 400px;
}
</style>
